import React, { useState, useEffect } from 'react';
import './Stats.css';

interface Stat {
  value: string;
  label: string;
  suffix: string;
}

const Stats: React.FC = () => {
  const [counters, setCounters] = useState<number[]>([0, 0, 0, 0]);

  const stats: Stat[] = [
    { value: '1000', label: '用户创作作品', suffix: '万+' },
    { value: '50', label: '日活跃用户', suffix: '万+' },
    { value: '99.9', label: '服务可用性', suffix: '%' },
    { value: '24', label: '全天候服务', suffix: '/7' }
  ];

  useEffect(() => {
    const animateCounters = () => {
      const targetValues = [1000, 50, 99.9, 24];
      const duration = 2000;
      const steps = 60;
      const stepDuration = duration / steps;

      let currentStep = 0;
      const timer = setInterval(() => {
        currentStep++;
        const progress = currentStep / steps;
        
        setCounters(prev => prev.map((_, index) => {
          const target = targetValues[index];
          return target * progress;
        }));

        if (currentStep >= steps) {
          clearInterval(timer);
          setCounters(targetValues);
        }
      }, stepDuration);
    };

    // Start animation when component mounts
    const timer = setTimeout(animateCounters, 500);
    return () => clearTimeout(timer);
  }, []);

  return (
    <section className="stats">
      <div className="container">
        <div className="stats-grid">
          {stats.map((stat, index) => (
            <div key={index} className="stat-item fade-in-up">
              <h3 className="stat-value">
                {index === 2 ? counters[index].toFixed(1) : Math.floor(counters[index])}
                <span className="stat-suffix">{stat.suffix}</span>
              </h3>
              <p className="stat-label">{stat.label}</p>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
};

export default Stats;
